﻿@using PerpetuumSoft.Knockout
@using ContractorTimesheet.DataModel

@model ContractorTimesheet.Models.ChangePasswordModel

@{
    var ko = Html.CreateKnockoutContext();
}

<h2>Change Password</h2>

<form id="myform">
    <div >
        <table border="0" width="100%">
            <tr>
                <td>
                    <hr />
                </td>
            </tr>
            <tr align="center">
                <td height="35"><input name="oldPassword" id="oldPassword" placeholder="Old Password" @ko.Bind.Value(m => m.OldPassword) type="password" /> </td>
            </tr>
            <tr align="center">
                <td height="35"><input name="newPassword" id="newPassword" placeholder="New Password" @ko.Bind.Value(m => m.NewPassword) type="password" /> </td>
            </tr>
            <tr align="center">
                <td height="35"><input name="confirmPassword" id="confirmPassword" placeholder="Confirm New Password" type="password" /> </td>
            </tr>
            <tr align="center">
                <td height="50">
                    <button type="submit">Change Password</button>
                </td>
            </tr>
            <tr align="center">
                <td height="50">
                    <div id="message" @ko.Bind.Text(m => m.Message)></div>
                </td>
            </tr>
        </table>
    </div>
</form>

<script type="text/javascript">

    $(document).ready(function () {

        $("#myform").ajaxForm();

        $("#myform").validate({
            rules: {
                oldPassword: { required: true, minlength: 1, maxlength: 12 },
                newPassword: { required: true, minlength: 1, maxlength: 12 },
                confirmPassword: { required: true, minlength: 1, maxlength: 12 },
            },
            messages: {
                oldPassword: { required: '', minlength: '', maxlength: '' },
                newPassword: { required: '', minlength: '', maxlength: '' },
                confirmPassword: { required: '', minlength: '', maxlength: '' }
            },
            submitHandler: function () {
                if ($("#newPassword").val() == $("#confirmPassword").val()) {
                    $("#message").text("Processing...");
                    @ko.ServerAction("ChangePassword", "ChangePassword");
                }
                else {
                    $("#newPassword").addClass("error");
                    $("#confirmPassword").addClass("error");
                }
            }
        });
    });

</script>

@ko.Apply(Model)
